{% load static %}
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>旅游推荐系统</title>
    <!-- 引入 Bootstrap 5 -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 引入 Font Awesome -->
    <link rel="stylesheet" href="{% static 'plugins/font-awesome-4.7.0/css/font-awesome.css' %}">
    <style>
        :root {
            --primary-color: #ff6b6b;
            --secondary-color: #48dbfb;
            --accent-color: #1dd1a1;
            --dark-color: #2f3640;
        }

        body {
            font-family: 'Microsoft YaHei', sans-serif;
            background-color: #f5f6fa;
        }

        /* 改进的导航条 */
        .navbar-custom {
            background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
            padding: 0;
        }

        .navbar-brand {
            font-weight: 700;
            font-size: 1.8rem;
            color: white !important;
            padding: 15px 25px;
            background-color: rgba(0, 0, 0, 0.2);
            margin-right: 30px;
        }

        .nav-item {
            margin: 0 5px;
        }

        .nav-link-custom {
            color: white !important;
            font-weight: 500;
            padding: 15px 25px !important;
            border-radius: 0;
            transition: all 0.3s;
            position: relative;
            background-color: transparent;
        }

        .nav-link-custom:hover, .nav-link-custom:focus {
            background-color: rgba(255, 255, 255, 0.2);
            transform: translateY(-3px);
            cursor: pointer;
        }

        .nav-link-custom:before {
            content: '';
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 0;
            height: 3px;
            background: white;
            transition: width 0.3s;
        }

        .nav-link-custom:hover:before {
            width: 70%;
        }

        .dropdown-menu {
            border: none;
            border-radius: 0 0 10px 10px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        .dropdown-item {
            padding: 10px 20px;
            transition: all 0.2s;
        }

        .dropdown-item:hover {
            background-color: var(--primary-color);
            color: white !important;
            padding-left: 25px;
        }

        /* 热门城市轮播 */
        .hero-carousel {
            height: 500px;
            border-radius: 0 0 15px 15px;
            overflow: hidden;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
            margin-top: -1px; /* 消除导航条与轮播间的缝隙 */
        }

        .hero-carousel .carousel-item img {
            height: 500px;
            object-fit: cover;
            filter: brightness(0.7);
        }

        .carousel-caption {
            bottom: 30%;
            text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
        }

        .carousel-caption h3 {
            font-size: 3.5rem;
            font-weight: 800;
            margin-bottom: 20px;
        }

        .carousel-caption p {
            font-size: 1.2rem;
            margin-bottom: 30px;
        }

        .btn-explore {
            background-color: var(--accent-color);
            border: none;
            padding: 12px 30px;
            font-weight: 600;
            border-radius: 50px;
            transition: all 0.3s;
        }

        .btn-explore:hover {
            background-color: #17a689;
            transform: translateY(-3px);
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
        }

        /* 推荐景点板块 */
        .recommend-section {
            padding: 60px 0;
            background: white;
        }

        .section-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 30px;
        }

        .section-title {
            font-size: 2rem;
            font-weight: 700;
            color: var(--dark-color);
            position: relative;
            padding-bottom: 15px;
        }

        .section-title:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 80px;
            height: 4px;
            background: linear-gradient(to right, var(--primary-color), var(--secondary-color));
        }

        .view-all {
            color: var(--primary-color);
            font-weight: 600;
            text-decoration: none;
            transition: all 0.3s;
        }

        .view-all:hover {
            color: var(--secondary-color);
            transform: translateX(5px);
        }

        .recommend-card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.4s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
            margin-bottom: 30px;
            height: 100%;
        }

        .recommend-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
        }

        .recommend-card img {
            height: 200px;
            object-fit: cover;
            transition: transform 0.5s;
        }

        .recommend-card:hover img {
            transform: scale(1.05);
        }

        .card-body {
            padding: 20px;
        }

        .card-title {
            font-weight: 700;
            color: var(--dark-color);
            margin-bottom: 10px;
        }

        .card-text {
            color: #7f8c8d;
            font-size: 0.9rem;
            margin-bottom: 15px;
        }

        .price {
            font-weight: 700;
            color: var(--primary-color);
            font-size: 1.2rem;
        }

        .rating {
            color: #f39c12;
            margin-right: 10px;
        }

        /* 特色推荐板块 */
        .feature-section {
            padding: 60px 0;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        .feature-card {
            background: white;
            border-radius: 15px;
            padding: 30px;
            height: 100%;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            transition: all 0.3s;
        }

        .feature-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .feature-icon {
            font-size: 2.5rem;
            color: var(--primary-color);
            margin-bottom: 20px;
        }

        /* 旅游攻略板块 */
        .blog-section {
            padding: 60px 0;
            background: white;
        }

        .blog-card {
            border: none;
            border-radius: 15px;
            overflow: hidden;
            transition: all 0.3s;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
            height: 100%;
        }

        .blog-card:hover {
            transform: translateY(-10px);
            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);
        }

        .blog-card img {
            height: 180px;
            object-fit: cover;
        }

        .blog-date {
            color: var(--primary-color);
            font-size: 0.8rem;
            font-weight: 600;
        }

        .blog-title {
            font-weight: 700;
            margin: 10px 0;
            color: var(--dark-color);
        }

        .blog-excerpt {
            color: #7f8c8d;
            font-size: 0.9rem;
        }

        /* 底部快速链接 */
        .quick-links {
            padding: 40px 0;
            background: var(--dark-color);
            color: white;
        }

        .links-title {
            font-size: 1.2rem;
            margin-bottom: 20px;
            position: relative;
            padding-bottom: 10px;
        }

        .links-title:after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 0;
            width: 40px;
            height: 3px;
            background: var(--primary-color);
        }

        .links-list {
            list-style: none;
            padding: 0;
        }

        .links-list li {
            margin-bottom: 10px;
        }

        .links-list a {
            color: #bdc3c7;
            text-decoration: none;
            transition: all 0.3s;
        }

        .links-list a:hover {
            color: white;
            padding-left: 5px;
        }

        /* 仅针对用户下拉菜单的美化样式 */
        .user-dropdown {
            position: relative;
        }

        .user-dropdown-toggle {
            display: flex;
            align-items: center;
            background: rgba(255, 255, 255, 0.1) !important;
            border: none !important;
            color: white !important;
            padding: 8px 15px;
            border-radius: 50px;
            transition: all 0.3s;
        }

        .user-dropdown-toggle:hover {
            background: rgba(255, 255, 255, 0.2) !important;
        }

        .user-avatar {
            width: 32px;
            height: 32px;
            object-fit: cover;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        .user-name {
            font-weight: 500;
            margin-right: 5px;
        }

        .user-dropdown-menu {
            border: none;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 8px 0;
            margin-top: 10px;
            min-width: 200px;
        }

        .user-dropdown-menu .dropdown-item {
            padding: 8px 16px;
            transition: all 0.2s;
        }

        .user-dropdown-menu .dropdown-item:hover {
            background-color: #f8f9fa;
            color: #ff6b6b;
            padding-left: 20px;
        }

        .user-dropdown-menu .dropdown-divider {
            margin: 8px 0;
        }

        .user-dropdown-menu i {
            width: 18px;
            text-align: center;
            margin-right: 10px;
        }

        /* 专门解决堆叠问题的样式 */
        .user-dropdown-btn {
            background: rgba(255, 255, 255, 0.1) !important;
            border: none !important;
            color: white !important;
            padding: 6px 12px !important;
            border-radius: 50px !important;
            transition: all 0.3s !important;
            min-width: 150px; /* 保证有足够宽度 */
        }

        .user-dropdown-btn:hover {
            background: rgba(255, 255, 255, 0.2) !important;
        }

        /* 头像容器 */
        .user-avatar-container {
            width: 32px;
            height: 32px;
            flex-shrink: 0; /* 防止被压缩 */
        }

        .user-avatar-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }

        /* 用户信息容器 */
        .user-info-container {
            flex-grow: 1;
            min-width: 0; /* 允许文本截断 */
        }

        .user-name {
            font-weight: 500;
            display: inline-block;
            vertical-align: middle;
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .dropdown-arrow {
            transition: transform 0.3s;
            flex-shrink: 0; /* 防止箭头被压缩 */
        }

        /* 下拉菜单打开时箭头旋转 */
        .show .dropdown-arrow {
            transform: rotate(180deg);
        }

        /* 下拉菜单样式 */
        .user-dropdown-menu {
            border: none;
            border-radius: 8px;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            padding: 6px 0;
            margin-top: 8px;
        }

        .user-dropdown-menu .dropdown-item {
            padding: 8px 16px;
            transition: all 0.2s;
        }

        .user-dropdown-menu .dropdown-item:hover {
            background-color: #f8f9fa;
            color: #ff6b6b;
            padding-left: 20px;
        }
    </style>
</head>
<body>
<!-- 导航条 -->
<nav class="navbar navbar-expand-lg navbar-dark navbar-custom sticky-top">
    <div class="container">
        <a class="navbar-brand" href="#">
            <i class="fa fa-map-marked-alt"></i> 旅游推荐系统
        </a>
        <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav">
            <span class="navbar-toggler-icon"></span>
        </button>
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav me-auto">
                <li class="nav-item">
                    <a class="nav-link nav-link-custom active" href="/homepage/"><i class="fa fa-home"></i> 首页</a>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-link-custom" href="/travel/article/homepage/"><i class="fa fa-newspaper"></i>
                        旅游资讯</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link nav-link-custom dropdown-toggle" href="#" id="navbarDropdown1" role="button"
                       data-bs-toggle="dropdown">
                        <i class="fa fa-compass"></i> 目的地推荐
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown1">
                        <li><a class="dropdown-item" href="#">国内热门</a></li>
                        <li><a class="dropdown-item" href="#">国外精选</a></li>
                        <li>
                            <hr class="dropdown-divider">
                        </li>
                        <li><a class="dropdown-item" href="#">季节限定</a></li>
                        <li><a class="dropdown-item" href="#">主题旅游</a></li>
                    </ul>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link nav-link-custom dropdown-toggle" href="#" id="navbarDropdown2" role="button"
                       data-bs-toggle="dropdown">
                        <i class="fa fa-route"></i> 行程规划
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown2">
                        <li><a class="dropdown-item" href="#">自由行攻略</a></li>
                        <li><a class="dropdown-item" href="#">跟团游推荐</a></li>
                        <li><a class="dropdown-item" href="#">自驾游路线</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a class="nav-link nav-link-custom" href="/travel/picture/homepage/"><i class="fa fa-camera"></i>
                        旅游图库</a>
                </li>
                <li class="nav-item dropdown">
                    <a class="nav-link nav-link-custom dropdown-toggle" href="#" id="navbarDropdown3" role="button"
                       data-bs-toggle="dropdown">
                        <i class="fa fa-ellipsis-h"></i> 更多
                    </a>
                    <ul class="dropdown-menu" aria-labelledby="navbarDropdown3">
                        <li><a class="dropdown-item" href="#">旅游装备</a></li>
                        <li><a class="dropdown-item" href="#">美食指南</a></li>
                        <li><a class="dropdown-item" href="#">住宿推荐</a></li>
                    </ul>
                </li>
            </ul>

            <!-- 使用Bootstrap样式的用户下拉菜单 -->
            <!-- 美化后的用户下拉菜单 -->
            <!-- 优化后的用户下拉菜单 - 解决堆叠问题 -->
            <div class="dropdown user-dropdown ms-2">
                <button class="btn user-dropdown-btn d-flex align-items-center"
                        type="button"
                        id="userDropdownMenu"
                        data-bs-toggle="dropdown"
                        aria-expanded="false">

                    <!-- 头像容器 -->
                    <div class="user-avatar-container me-2">
                        <img src="{{ MEDIA_URL }}img/users/{{ user.id }}/avatar/avatar.jpg?v={{ user.avatar_timestamp }}"
                             class="user-avatar-img"
                             alt="头像预览">
                    </div>

                    <!-- 用户名和下拉图标 -->
                    <div class="user-info-container d-flex align-items-center">
                        <span class="user-name text-truncate"
                              style="max-width: 100px;">{{ user.nickname }}</span>
                        <i class="fa fa-angle-down ms-1 dropdown-arrow"></i>
                    </div>
                </button>

                <!-- 下拉菜单 -->
                <ul class="dropdown-menu user-dropdown-menu dropdown-menu-end"
                    aria-labelledby="userDropdownMenu">
                    <li><a class="dropdown-item" href="/user/{{ user.id }}/edit/profile/"><i class="fa fa-user-circle me-2"></i>个人中心</a></li>
                    <li><a class="dropdown-item" href="#"><i class="fa fa-heart me-2"></i>我的收藏</a></li>
                    <li><a class="dropdown-item" href="#"><i class="fa fa-history me-2"></i>浏览历史</a></li>
                    <li>
                        <hr class="dropdown-divider">
                    </li>
                    <li><a class="dropdown-item" href="#"><i class="fa fa-cog me-2"></i>账户设置</a></li>
                    <li><a class="dropdown-item text-danger" href="/logout/"><i class="fa fa-sign-out me-2"></i>退出登录</a>
                    </li>
                </ul>
            </div>


        </div>
    </div>
    </div>
</nav>

<!-- 热门城市轮播 -->
<div id="heroCarousel" class="carousel slide hero-carousel" data-bs-ride="carousel" data-bs-wrap="true">
    <div class="carousel-indicators">
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="0" class="active"></button>
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="1"></button>
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="2"></button>
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="3"></button>
        <button type="button" data-bs-target="#heroCarousel" data-bs-slide-to="4"></button>
    </div>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="{% static 'img/BeijingGugong.jpg' %}" class="d-block w-100" alt="北京">
            <div class="carousel-caption text-start">
                <h3>北京故宫</h3>
                <p>探索千年古都的皇家气派与文化底蕴</p>
                <a href="#" class="btn btn-explore">立即探索 <i class="fa fa-arrow-right"></i></a>
            </div>
        </div>
        <div class="carousel-item">
            <img src="{% static 'img/ShanghaiWaitan.jpg' %}" class="d-block w-100" alt="上海">
            <div class="carousel-caption text-start">
                <h3>上海外滩</h3>
                <p>感受东方巴黎的现代魅力与历史风情</p>
                <a href="#" class="btn btn-explore">立即探索 <i class="fa fa-arrow-right"></i></a>
            </div>
        </div>
        <div class="carousel-item">
            <img src="{% static 'img/ChengduPanda.jpg' %}" class="d-block w-100" alt="成都">
            <div class="carousel-caption text-start">
                <h3>成都大熊猫</h3>
                <p>邂逅国宝熊猫，体验川味慢生活</p>
                <a href="#" class="btn btn-explore">立即探索 <i class="fa fa-arrow-right"></i></a>
            </div>
        </div>
        <div class="carousel-item">
            <img src="{% static 'img/ChengdeBishushanzhuang.jpg' %}" class="d-block w-100" alt="承德">
            <div class="carousel-caption text-start">
                <h3>承德避暑山庄</h3>
                <p>漫步皇家园林，领略山水画卷中的盛世遗韵与清凉雅趣</p>
                <a href="#" class="btn btn-explore">立即探索 <i class="fa fa-arrow-right"></i></a>
            </div>
        </div>
        <div class="carousel-item">
            <img src="{% static 'img/XinjiangQiaxicaoyuan.jpg' %}" class="d-block w-100" alt="上海">
            <div class="carousel-caption text-start">
                <h3>新疆恰西草原</h3>
                <p>天蓝山青云缥缈，这一程，值得</p>
                <a href="#" class="btn btn-explore">立即探索 <i class="fa fa-arrow-right"></i></a>
            </div>
        </div>
    </div>
    <button class="carousel-control-prev" type="button" data-bs-target="#heroCarousel" data-bs-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </button>
    <button class="carousel-control-next" type="button" data-bs-target="#heroCarousel" data-bs-slide="next">
        <span class="carousel-control-next-icon"></span>
    </button>
</div>

<!-- 推荐景点板块 -->
<section class="recommend-section">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">你可能感兴趣的景点</h2>
            <a href="#" class="view-all">查看全部 <i class="fa fa-angle-right"></i></a>
        </div>
        <div class="row">
            <div class="col-md-6 col-lg-3">
                <div class="recommend-card">
                    <img src="{% static 'img/hangzhou.jpg' %}" class="card-img-top" alt="杭州西湖">
                    <div class="card-body">
                        <h5 class="card-title">杭州西湖</h5>
                        <p class="card-text">"人间天堂"的湖光山色，四季皆有不同的美景</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="rating"><i class="fa fa-star"></i> 4.8</span>
                                <span class="text-muted">(1.2k评价)</span>
                            </div>
                            <span class="price">¥680起</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="recommend-card">
                    <img src="{% static 'img/xian.jpg' %}" class="card-img-top" alt="西安兵马俑">
                    <div class="card-body">
                        <h5 class="card-title">西安兵马俑</h5>
                        <p class="card-text">世界第八大奇迹，感受大秦帝国的雄伟气势</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="rating"><i class="fa fa-star"></i> 4.9</span>
                                <span class="text-muted">(2.3k评价)</span>
                            </div>
                            <span class="price">¥550起</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="recommend-card">
                    <img src="{% static 'img/guilin.jpg' %}" class="card-img-top" alt="桂林山水">
                    <div class="card-body">
                        <h5 class="card-title">桂林山水</h5>
                        <p class="card-text">"山水甲天下"的漓江风光，如诗如画的自然美景</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="rating"><i class="fa fa-star"></i> 4.7</span>
                                <span class="text-muted">(980评价)</span>
                            </div>
                            <span class="price">¥720起</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-lg-3">
                <div class="recommend-card">
                    <img src="{% static 'img/lijiang.jpg' %}" class="card-img-top" alt="丽江古城">
                    <div class="card-body">
                        <h5 class="card-title">丽江古城</h5>
                        <p class="card-text">纳西文化的活化石，感受慢节奏的古镇生活</p>
                        <div class="d-flex justify-content-between align-items-center">
                            <div>
                                <span class="rating"><i class="fa fa-star"></i> 4.6</span>
                                <span class="text-muted">(1.5k评价)</span>
                            </div>
                            <span class="price">¥890起</span>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 特色推荐板块 -->
<section class="feature-section">
    <div class="container">
        <h2 class="section-title">特色旅游推荐</h2>
        <div class="row">
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fa fa-umbrella-beach"></i>
                    </div>
                    <h3>海滨度假</h3>
                    <p>从三亚的碧海蓝天到青岛的金沙滩，享受阳光、沙滩和海浪的完美假期。</p>
                    <a href="#" class="btn btn-outline-primary">查看详情</a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fa fa-mountain"></i>
                    </div>
                    <h3>登山徒步</h3>
                    <p>征服五岳之巅，探索黄山奇松，体验中国最美的登山徒步路线。</p>
                    <a href="#" class="btn btn-outline-primary">查看详情</a>
                </div>
            </div>
            <div class="col-md-4">
                <div class="feature-card">
                    <div class="feature-icon">
                        <i class="fa fa-utensils"></i>
                    </div>
                    <h3>美食之旅</h3>
                    <p>从四川火锅到广东早茶，跟随我们的美食地图，开启一场味蕾的冒险。</p>
                    <a href="#" class="btn btn-outline-primary">查看详情</a>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 旅游攻略板块 -->
<section class="blog-section">
    <div class="container">
        <div class="section-header">
            <h2 class="section-title">热门旅游攻略</h2>
            <a href="#" class="view-all">查看全部 <i class="fa fa-angle-right"></i></a>
        </div>
        <div class="row">
            <div class="col-md-4">
                <div class="blog-card">
                    <img src="{% static 'img/blog1.jpg' %}" class="card-img-top" alt="旅游攻略">
                    <div class="card-body">
                        <span class="blog-date"><i class="fa fa-calendar"></i> 2023-06-15</span>
                        <h5 class="blog-title">2023最新中国十大必去景点</h5>
                        <p class="blog-excerpt">从长城到张家界，我们为您精选了今年最值得一去的十大景点...</p>
                        <a href="#" class="btn btn-sm btn-primary">阅读更多</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="blog-card">
                    <img src="{% static 'img/blog2.jpg' %}" class="card-img-top" alt="旅游攻略">
                    <div class="card-body">
                        <span class="blog-date"><i class="fa fa-calendar"></i> 2023-06-08</span>
                        <h5 class="blog-title">夏季避暑胜地TOP5</h5>
                        <p class="blog-excerpt">炎炎夏日去哪里？这些避暑胜地让你清凉一夏，远离酷暑...</p>
                        <a href="#" class="btn btn-sm btn-primary">阅读更多</a>
                    </div>
                </div>
            </div>
            <div class="col-md-4">
                <div class="blog-card">
                    <img src="{% static 'img/blog3.jpg' %}" class="card-img-top" alt="旅游攻略">
                    <div class="card-body">
                        <span class="blog-date"><i class="fa fa-calendar"></i> 2023-06-01</span>
                        <h5 class="blog-title">穷游中国：预算5000元玩转15天</h5>
                        <p class="blog-excerpt">学生党必看！如何用有限的预算玩转中国各大热门城市...</p>
                        <a href="#" class="btn btn-sm btn-primary">阅读更多</a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!-- 快速链接 -->
<section class="quick-links">
    <div class="container">
        <div class="row">
            <div class="col-md-3">
                <h4 class="links-title">热门城市</h4>
                <ul class="links-list">
                    <li><a href="#">北京</a></li>
                    <li><a href="#">上海</a></li>
                    <li><a href="#">广州</a></li>
                    <li><a href="#">深圳</a></li>
                    <li><a href="#">成都</a></li>
                </ul>
            </div>
            <div class="col-md-3">
                <h4 class="links-title">热门景点</h4>
                <ul class="links-list">
                    <li><a href="#">长城</a></li>
                    <li><a href="#">故宫</a></li>
                    <li><a href="#">西湖</a></li>
                    <li><a href="#">黄山</a></li>
                    <li><a href="#">九寨沟</a></li>
                </ul>
            </div>
            <div class="col-md-3">
                <h4 class="links-title">旅游类型</h4>
                <ul class="links-list">
                    <li><a href="#">自由行</a></li>
                    <li><a href="#">跟团游</a></li>
                    <li><a href="#">自驾游</a></li>
                    <li><a href="#">邮轮游</a></li>
                    <li><a href="#">定制游</a></li>
                </ul>
            </div>
            <div class="col-md-3">
                <h4 class="links-title">帮助中心</h4>
                <ul class="links-list">
                    <li><a href="#">常见问题</a></li>
                    <li><a href="#">预订指南</a></li>
                    <li><a href="#">退改政策</a></li>
                    <li><a href="#">联系我们</a></li>
                    <li><a href="#">意见反馈</a></li>
                </ul>
            </div>
        </div>
    </div>
</section>

<!-- 确认退出对话框 -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog" role="document">

            <div class="alert alert-danger alert-dismissible fade in" role="alert">

                <h4>是否确定退出登录？</h4>
                <p style="margin: 10px 0;">退出后所有功能将不能使用</p>
                <p style="text-align: right">
                    <button id="btnConfirmDelete" type="button" class="btn btn-danger">退 出</button>
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                </p>
            </div>
        </div>
    </div>


<!-- 引入 Bootstrap JS -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
<script>
    // 导航条悬浮效果增强
    document.querySelectorAll('.nav-link-custom').forEach(link => {
        link.addEventListener('mouseenter', function () {
            this.style.transform = 'translateY(-3px)';
            this.style.boxShadow = '0 5px 15px rgba(0,0,0,0.1)';
        });
        link.addEventListener('mouseleave', function () {
            this.style.transform = '';
            this.style.boxShadow = '';
        });
    });

    // 卡片悬浮动画
    document.querySelectorAll('.recommend-card, .feature-card, .blog-card').forEach(card => {
        card.addEventListener('mouseenter', function () {
            this.style.transform = 'translateY(-10px)';
            this.style.boxShadow = '0 15px 30px rgba(0,0,0,0.15)';
        });
        card.addEventListener('mouseleave', function () {
            this.style.transform = '';
            this.style.boxShadow = '';
        });
    });

    // 初始化轮播
    document.addEventListener('DOMContentLoaded', function () {
        var myCarousel = document.getElementById('heroCarousel');
        var carousel = new bootstrap.Carousel(myCarousel, {
            interval: 3000,  // 3秒切换一次
            wrap: true       // 确保循环
        });
    });

    // 页面加载时添加时间戳参数，防止缓存
document.addEventListener('DOMContentLoaded', function() {
    const avatarImg = document.getElementById('userAvatar');
    if (avatarImg) {
        // 添加时间戳参数
        avatarImg.src = avatarImg.src + '?t=' + new Date().getTime();
    }
});
</script>
</body>
</html>